<script setup>
import {ref} from "vue";

const activeMenuItem = ref('首页'); // 默认激活的菜单项

const menuData = ref([
  {
    title: '首页',
    path: '/consumerIndex'
  },
  {
    title: '职位管理',
    path: '/issue'
  },
  {
    title: '简历管理',
    path: ''
  },
  {
    title: '小任务',
    path: ''
  },
  {
    title: '消息',
    path: ''
  }
]);

// 更新激活菜单项的方法
const setActiveMenu = (title) => {
  activeMenuItem.value = title;
};

// 判断是否为激活菜单项的方法
const isActiveMenu = (title) => {
  return activeMenuItem.value === title;
};
</script>

<template>
  <div class="common-layout">
    <el-container class="bg">
      <el-header class="app-navbar">
        <div class="header">
          <div class="header-left">
            <div class="logo-div fl">
              <img src="https://qiniu-image.qtshe.com/qts-new-logo.png">
            </div>
            <div class="menu fl">
              <div class="clearfix" v-for="(item, index) in menuData" :key="index">
                <router-link
                    :to="item.path"
                    @click="setActiveMenu(item.title)"
                    :class="{ 'active': isActiveMenu(item.title) }"
                >
                  {{ item.title }}
                </router-link>
              </div>
            </div>
          </div>
          <div class="header-right">
            <div></div>
          </div>
        </div>
      </el-header>
      <el-main class="app-main">
        <div class="main">
          <router-view></router-view>
        </div>
      </el-main>
      <el-footer class="app-footer">
        <div class="footer">
          foot
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<style scoped>
.common-layout {
  margin: 0;
  padding: 0;
}

.bg {
  min-width: 1180px;
  background-color: #eff3f6;
}

.app-navbar {
  position: fixed;
  top: 0;
  background-color: #fff;
  font-size: 14px;
  color: #666;
  width: 100%;
  height: 70px;
  z-index: 99;
}

.header {
  width: 1180px;
  margin: 0 auto;
  background: #646cff;
  height: 100%;
}

.header-left {
  display: inline-block;
  width: 920px;
  height: 100%;
  background: #FF8712;
  position: relative;
}

.logo-div {
  width: 157px;
  margin: 15px 50px 0 0;
  overflow: hidden;
}

.logo-div img {
  width: 100%;
  cursor: pointer;
  height: auto;
}

.menu {
  display: flex;
  flex-direction: row;
  height: 100%;
  line-height: 70px;
}

.fl {
  float: left;
}

.clearfix a{
  color: #666;
  margin: 0 54px 0 0;
  text-decoration: none;
  cursor: pointer;
}

.clearfix a:hover,
.clearfix a.active {
  color: #1ecdb9;
}

.header-right {
  display: inline-block;
  width: 255px;
  height: 70px;
  background: red;
  vertical-align: top;
}

.app-main {
  width: 1180px;
  margin: 0 auto;
  min-height: 500px;
  padding-top: 100px;
}

.app-footer {
  font-size: 14px;
  width: 100%;
  height: 200px;
  background-color: #34383b;
  color: #999;
  margin-top: 60px;
}
</style>